<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }
      #gameContainer {
        position: relative;
      }
      #gameCanvas {
        border: 1px solid #000;
        background-color: #000;
      }
      #scoreDisplay {
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        font-size: 20px;
      }
      #gameOver {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: red;
        font-size: 40px;
        display: none;
      }
      #restartBtn {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        font-size: 18px;
        display: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="gameContainer">
      <canvas id="gameCanvas" width="400" height="600"></canvas>
      <div id="scoreDisplay">分数: 0</div>
      <div id="gameOver">游戏结束!</div>
      <button id="restartBtn">重新开始</button>
    </div>
  </body>
  <script>
    // 获取Canvas元素和上下文
    const canvas = document.getElementById('gameCanvas')
    const ctx = canvas.getContext('2d')
    const scoreDisplay = document.getElementById('scoreDisplay')
    const gameOverDisplay = document.getElementById('gameOver')
    const restartBtn = document.getElementById('restartBtn')

    // 游戏状态
    let gameRunning = true
    let score = 0
    let frameCount = 0

    // 玩家飞机
    const player = {
      x: canvas.width / 2 - 25,
      y: canvas.height - 60,
      width: 50,
      height: 50,
      speed: 5,
      color: '#00FF00',
      isMovingLeft: false,
      isMovingRight: false,
      isMovingUp: false,
      isMovingDown: false,
      shootCooldown: 0,
      shootDelay: 10 // 射击冷却时间（帧数）
    }

    // 子弹数组
    let bullets = []
    const bulletSpeed = 7
    const bulletWidth = 5
    const bulletHeight = 15

    // 敌机数组
    let enemies = []
    const enemySpeed = 2
    const enemyWidth = 40
    const enemyHeight = 40

    // 爆炸效果数组
    let explosions = []

    // 键盘事件监听
    document.addEventListener('keydown', function (e) {
      if (e.key === 'ArrowLeft' || e.key === 'a') player.isMovingLeft = true
      if (e.key === 'ArrowRight' || e.key === 'd') player.isMovingRight = true
      if (e.key === 'ArrowUp' || e.key === 'w') player.isMovingUp = true
      if (e.key === 'ArrowDown' || e.key === 's') player.isMovingDown = true
      if (e.key === ' ') playerShoot()
    })

    document.addEventListener('keyup', function (e) {
      if (e.key === 'ArrowLeft' || e.key === 'a') player.isMovingLeft = false
      if (e.key === 'ArrowRight' || e.key === 'd') player.isMovingRight = false
      if (e.key === 'ArrowUp' || e.key === 'w') player.isMovingUp = false
      if (e.key === 'ArrowDown' || e.key === 's') player.isMovingDown = false
    })

    // 重新开始按钮事件
    restartBtn.addEventListener('click', function () {
      resetGame()
    })

    // 玩家射击
    function playerShoot() {
      if (player.shootCooldown <= 0) {
        bullets.push({
          x: player.x + player.width / 2 - bulletWidth / 2,
          y: player.y,
          width: bulletWidth,
          height: bulletHeight,
          color: '#FFFF00'
        })
        player.shootCooldown = player.shootDelay
      }
    }

    // 创建敌机
    function createEnemy() {
      if (!gameRunning) return

      const x = Math.random() * (canvas.width - enemyWidth)
      enemies.push({
        x: x,
        y: -enemyHeight,
        width: enemyWidth,
        height: enemyHeight,
        color: '#FF0000'
      })

      // 随机时间后再次创建敌机
      setTimeout(createEnemy, Math.random() * 1000 + 500)
    }

    // 创建爆炸效果
    function createExplosion(x, y) {
      for (let i = 0; i < 20; i++) {
        const angle = Math.random() * Math.PI * 2
        const speed = Math.random() * 3 + 1
        explosions.push({
          x: x,
          y: y,
          radius: Math.random() * 3 + 2,
          color: `hsl(${Math.random() * 30 + 10}, 100%, 50%)`,
          vx: Math.cos(angle) * speed,
          vy: Math.sin(angle) * speed,
          life: 30
        })
      }
    }

    // 检测碰撞
    function checkCollision(rect1, rect2) {
      return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y
    }

    // 更新游戏状态
    function update() {
      if (!gameRunning) return

      frameCount++

      // 更新玩家位置
      if (player.isMovingLeft && player.x > 0) player.x -= player.speed
      if (player.isMovingRight && player.x < canvas.width - player.width) player.x += player.speed
      if (player.isMovingUp && player.y > 0) player.y -= player.speed
      if (player.isMovingDown && player.y < canvas.height - player.height) player.y += player.speed

      // 更新射击冷却
      if (player.shootCooldown > 0) player.shootCooldown--

      // 更新子弹位置
      for (let i = bullets.length - 1; i >= 0; i--) {
        bullets[i].y -= bulletSpeed

        // 移除超出屏幕的子弹
        if (bullets[i].y + bullets[i].height < 0) {
          bullets.splice(i, 1)
          continue
        }

        // 检测子弹与敌机的碰撞
        for (let j = enemies.length - 1; j >= 0; j--) {
          if (checkCollision(bullets[i], enemies[j])) {
            createExplosion(enemies[j].x + enemies[j].width / 2, enemies[j].y + enemies[j].height / 2)
            bullets.splice(i, 1)
            enemies.splice(j, 1)
            score += 10
            scoreDisplay.textContent = `分数: ${score}`
            break
          }
        }
      }

      // 更新敌机位置
      for (let i = enemies.length - 1; i >= 0; i--) {
        enemies[i].y += enemySpeed

        // 检测敌机与玩家的碰撞
        if (checkCollision(enemies[i], player)) {
          createExplosion(enemies[i].x + enemies[i].width / 2, enemies[i].y + enemies[i].height / 2)
          createExplosion(player.x + player.width / 2, player.y + player.height / 2)
          enemies.splice(i, 1)
          gameOver()
          return
        }

        // 移除超出屏幕的敌机
        if (enemies[i].y > canvas.height) {
          enemies.splice(i, 1)
          continue
        }
      }

      // 更新爆炸效果
      for (let i = explosions.length - 1; i >= 0; i--) {
        explosions[i].x += explosions[i].vx
        explosions[i].y += explosions[i].vy
        explosions[i].life--

        if (explosions[i].life <= 0) {
          explosions.splice(i, 1)
        }
      }
    }

    // 绘制游戏画面
    function draw() {
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      // 绘制玩家飞机
      ctx.fillStyle = player.color
      ctx.beginPath()
      ctx.moveTo(player.x + player.width / 2, player.y)
      ctx.lineTo(player.x + player.width, player.y + player.height)
      ctx.lineTo(player.x, player.y + player.height)
      ctx.closePath()
      ctx.fill()

      // 绘制子弹
      bullets.forEach(bullet => {
        ctx.fillStyle = bullet.color
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height)
      })

      // 绘制敌机
      enemies.forEach(enemy => {
        ctx.fillStyle = enemy.color
        ctx.beginPath()
        ctx.moveTo(enemy.x + enemy.width / 2, enemy.y + enemy.height)
        ctx.lineTo(enemy.x + enemy.width, enemy.y)
        ctx.lineTo(enemy.x, enemy.y)
        ctx.closePath()
        ctx.fill()
      })

      // 绘制爆炸效果
      explosions.forEach(explosion => {
        ctx.fillStyle = explosion.color
        ctx.beginPath()
        ctx.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2)
        ctx.fill()
      })
    }

    // 游戏循环
    function gameLoop() {
      update()
      draw()
      requestAnimationFrame(gameLoop)
    }

    // 游戏结束
    function gameOver() {
      gameRunning = false
      gameOverDisplay.style.display = 'block'
      restartBtn.style.display = 'block'
    }

    // 重置游戏
    function resetGame() {
      gameRunning = true
      score = 0
      frameCount = 0
      player.x = canvas.width / 2 - 25
      player.y = canvas.height - 60
      bullets = []
      enemies = []
      explosions = []
      scoreDisplay.textContent = `分数: ${score}`
      gameOverDisplay.style.display = 'none'
      restartBtn.style.display = 'none'

      // 重新开始创建敌机
      setTimeout(createEnemy, 1000)
    }

    // 开始游戏
    createEnemy()
    gameLoop()
  </script>
</html>
